<template>
  <view class="personal-center-container">
    <!--上方背景-->
    <image class="common_img bg-top" src="../../static/img/personalCenter/bg.png" />
    <!--头像-->
    <!-- #ifdef MP-WEIXIN  -->
    <button class="common_img head" open-type="chooseAvatar" @tap="getUserAvatar" @chooseavatar="getUserAvatar">
      <image class="head_img" :src="userInfo && userInfo.avatar ? userInfo.avatar : head_url" />
    </button>
    <!-- #endif -->
    <!-- #ifdef H5  -->
    <button class="common_img head">
      <image class="head_img" :src="userInfo && userInfo.avatar ? userInfo.avatar : head_url" />
    </button>
    <!-- #endif -->
    <!--昵称-->
    <view class="nick-name">{{
      userInfo == null ? "未登录" : userInfo.nickname
    }}</view>
    <!--会员按钮-->
    <!-- 	<view class="icon-vip">{{vipName}}</view> -->
    <!--  获取用户信息
	    <button class="btn_get_use_info hidden" open-type="getUserInfo" bindgetuserinfo="getUserInfo"
	        wx:if="!bHaveUserInfo"></button> -->
    <!--引导开通会员-->
    <!-- 	    <image class="common_img vip" bindtap="onGotoMemberCenter" wx:if="!isMember"
	        src="../../static/img/personalCenter/open_vip.png" />
	    <image class="common_img vip" bindtap="onGotoMemberCenter" wx:else
	        src="../../static/img/personalCenter/look_vip.png" /> -->
    <!--功能区-->
    <view class="funContainer">
      <block v-for="(item, i) in arrFuns" :key="i">
        <view @tap="toMyOrders(item)" class="icon-txt-cnt-component-containter">
          <view class="icon-txt-cnt-component-containter-inner">
            <image class="item-icon" :src="item.icon" />
            <view class="item-cnt" v-if="item.cnt > 0">{{
              item.cnt >= 9 ? "9+" : item.cnt === 0 ? "" : item.cnt
            }}</view>
            <view class="item-tips">{{ item.tips }}</view>
          </view>
          <!-- 	<image class="arrow" src="../../static/img/personalCenter/arrow.png"
						v-if="i==arrFuns.length-2" />	 -->
        </view>
      </block>
    </view>
    <!--分割线-->
    <!--功能列表-->
    <view>
      <block v-for="item in arrQuery" :key="item.flag">
        <view class="list-item" @tap="onGuideFunc(item)">
          <image class="list-item-icon" :src="item.icon" />
          <view class="list-item-tips">{{ item.tips }}</view>
          <view class="list-item-arrow">></view>
          <block v-if="item.flag === 'service'">
            <button class="btn_contact" open-type="contact"></button>
          </block>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
// wait_pay: 1,//待支付,
// pay_fail: 2,//支付失败,
// wait_send: 3,//已支付(待发货),
// had_send: 4,//已发货(待签收),
// over: 5,//已签收,
// assess: 6,//已评价,
// del: 7,//已删除,
// unknown: 0,//不存在
// all: 8,//查询所有的订单
// show: -1//前端样式显示
import { common } from "../../services/index.js";
import { mapState } from "vuex";
export default {
  data() {
    return {
      curRelativePath: "../../../../../", //相对路径-根目录
      nickName: "", //玩家昵称
      vipName: "", //会员类型
      head_url: "../../static/img/personalCenter/avatar.png", //头像
      arrFuns: [
        //功能列表-横向
        {
          icon: "../../static/img/personalCenter/icon_pay.png",
          tips: "待付款", //icon下方文案
          type: 1, //按钮类型
          cnt: 0, //数量
        },
        {
          icon: "../../static/img/personalCenter/icon_send.png",
          tips: "待发货", //icon下方文案
          type: 3, //按钮类型
          cnt: 0, //数量
        },
        {
          icon: "../../static/img/personalCenter/icon_accept.png",
          tips: "待收货", //icon下方文案
          type: 4, //按钮类型
          cnt: 0, //数量
        },
        {
          icon: "../../static/img/personalCenter/icon_order.png",
          tips: "我的订单", //icon下方文案
          type: 8, //按钮类型
          cnt: 0, //数量
        },
      ],
      arrQuery: [
        //下方列表-竖直
        {
          icon: "../../static/img/personalCenter/icon_0.png",
          tips: "收货地址", //icon下方文案
          flag: "address", //按钮类型
        },
        {
          icon: "../../static/img/personalCenter/coupon.png",
          tips: "优惠券", //icon下方文案
          flag: "coupon", //按钮类型
        },
        {
          icon: "../../static/img/common/logistics_5_1.png",
          tips: "发票管理", //icon下方文案
          flag: "invoiceList", //按钮类型
        },
        {
          icon: "../../static/img/personalCenter/icon_1.png",
          tips: "常见问题", //icon下方文案
          flag: "question", //按钮类型
        },
        {
          icon: "../../static/img/personalCenter/icon_2.png",
          tips: "客服中心", //icon下方文案
          flag: "service", //按钮类型
        },
      ],
      bHaveUserInfo: false, //是否需要用户授权
      isMember: false, //是否为会员
    };
  },
  onLoad() { },
  methods: {
    needLogin() {
      uni.showToast({
        title: "请登录",
        icon: "none",
      });
      this.$store.commit("webViewLogin");
    },
    toMyOrders(item) {
      if (this.userInfo === null) {
        this.needLogin();
        return false;
      }
      uni.navigateTo({
        url: "/pages/myOrder/index?orderType=" + item.type,
      });
    },
    onGuideFunc(item) {
      if (item.flag === "address") {
        if (this.userInfo === null) {
          this.needLogin();
          return false;
        }
        uni.navigateTo({
          url: "/pages/addressManager/index",
        });
      }
      if (item.flag === "question") {
        uni.navigateTo({
          url: "/subPage/question/index",
        });
      }
      if (item.flag === "coupon") {
        uni.navigateTo({
          url: "/pages/coupon/index",
        });
      }
      if (item.flag === "invoiceList") {
        uni.navigateTo({
          url: "/pages/invoiceList/index",
        });
      }
      // #ifdef H5
      if (item.flag === "service") {
        window.flutter_inappwebview
          .callHandler(
            "sxbookstore",
            "sxbookstore://book.rebook.com/function?cmd=customerService&data=" +
            JSON.stringify({ key: "客服" }) +
            "&callbackId=1&cbDispatcher=loginCallBack"
          )
          .then(function (res) { });
      }
      // #endif
    },
    getUserAvatar(e) {
      if (this.userInfo === null) {
        this.needLogin();
        return false;
      }
      const { avatarUrl } = e.detail;
      let that = this;
      const userToken = this.userToken;
      let config = {
        url: "https://www.realbook.com.cn/api/file/upload",
        filePath: avatarUrl,
        name: "file",
        header: {},
        formData: {
          fileClassification: "AVATAR", //可以附带的属性，我这里是用户的id
        },
        success(res) {
          let data = JSON.parse(res.data);
          if (data.code === 200) {
            common.upDataUserInfo({
              nickname: that.userInfo.nickname,
              avatar: data.data,
              sex: that.userInfo.sex,
            });
          }
        },
        fail(err) {
          console.log(err);
        },
      };
      if (userToken !== null) {
        config.header.Authorization = `Bearer ${userToken.token}`;
      }
      config.header["X-Client-Type"] = `MINI_PROGRAM`;
      wx.uploadFile(config);
      this.head_url = avatarUrl;
    },
  },
  computed: {
    ...mapState(["userInfo", "userToken"]),
  },
  mounted() { },
};
</script>

<style scoped>
page {
  background-color: #f6f6f6;
  width: 100%;
  height: 100%;
}

.personal-center-container {
  position: relative;
  width: 100%;
  min-height: 100%;
  margin: 0 0;
}

.personal-center-container .common_img {
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/*上方背景*/
.personal-center-container .bg-top {
  width: 100%;
  height: 300rpx;
}

/*头像*/
.personal-center-container .head {
  width: 120rpx;
  height: 120rpx;
  position: absolute;
  top: 67rpx;
  left: 24rpx;
  border-radius: 50%;
  padding: 0;
}

.head_img {
  width: 100%;
  height: 100%;
}

/**/
/*玩家昵称*/
.personal-center-container .nick-name {
  position: absolute;
  top: 80rpx;
  left: 166rpx;
  font-size: 32rpx;
  color: rgba(255, 255, 255, 1);
}

/*会员类型*/
.personal-center-container .icon-vip {
  position: absolute;
  top: 140rpx;
  left: 166rpx;
  width: 122rpx;
  height: 40rpx;
  background: rgba(255, 233, 175, 1);
  border-radius: 20rpx;
  font-size: 20rpx;
  color: rgba(59, 49, 49, 1);
  text-align: center;
  line-height: 40rpx;
}

/*开通会员*/
.personal-center-container .vip {
  width: 710rpx;
  height: 98rpx;
  position: absolute;
  left: 50%;
  top: 210rpx;
  transform: translateX(-50%);
}

/*功能列表*/
.personal-center-container .funContainer {
  width: 100%;
  height: 120rpx;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  margin: 20rpx 0 0 0;
  background-color: white;
  margin-bottom: 10rpx;
}

/*倒数两个之间的分割符*/
.personal-center-container .arrow {
  width: 14rpx;
  height: 83rpx;
}

/*分割线*/
.personal-center-container .line-rect {
  width: 100%;
  height: 10rpx;
  margin: 150rpx 0 0;
}

.personal-center-container .list-item {
  width: 100%;
  height: 100rpx;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  border-bottom: 1rpx solid #f1f1f1;
  line-height: 100rpx;
  color: rgba(51, 51, 51, 0.6);
  background-color: white;
}

/*功能icon*/
.personal-center-container .list-item-icon {
  width: 38rpx;
  height: 38rpx;
  margin: 31rpx 20rpx 31rpx 45rpx;
}

/*功能文案*/
.personal-center-container .list-item-tips {
  font-size: 28rpx;
  width: 545rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*右方箭头*/
.personal-center-container .list-item-arrow {
  font-size: 36rpx;
  color: rgba(51, 51, 51, 0.3);
  margin: 0 0 0 30rpx;
}

.btn_contact {
  position: absolute;
  width: 100%;
  height: 98rpx;
  opacity: 0;
}

.icon-txt-cnt-component-containter {
  position: relative;
  width: 100rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.icon-txt-cnt-component-containter-inner {
  text-align: center;
}

.icon-txt-cnt-component-containter .item-cnt {
  width: 30rpx;
  height: 30rpx;
  background: rgba(255, 255, 255, 1);
  border: 2rpx solid rgba(242, 85, 0, 1);
  border-radius: 50%;
  font-size: 18rpx;
  font-weight: bold;
  color: rgba(242, 85, 0, 1);
  text-align: center;
  margin: 0 0 0 20rpx;
  position: absolute;
  line-height: 30rpx;
}

/*功能icon*/
.icon-txt-cnt-component-containter .item-icon {
  width: 44rpx;
  height: 44rpx;
  margin: 10rpx 0;
}

/*功能文案*/
.icon-txt-cnt-component-containter .item-tips {
  font-size: 24rpx;
  color: rgba(51, 51, 51, 0.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.personal-center-container .btn_get_use_info {
  position: absolute;
  top: 67rpx;
  left: 24rpx;
  width: 260rpx;
  height: 120rpx;
}
</style>
